<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrapValidator.min.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/buttons.css">
    <style>
        .mainContent {
            position: relative;
        }

        .pageHeader {
            border-bottom: 1px solid #eee;
            margin-bottom: 10px;
        }

        .pageHeader .backLink {
            position: absolute;
            top: 11px;
            left: 210px;
            font-size: 15px;

        }

        .editbuttonDiv {
            position: absolute;
            top: 50px;
            right: 20px;
        }

        .uploadImgShow {
            margin-left: 80px;
            margin-bottom: 20px;
        }

        .uploadImgShow img {
            width: 140px;
            height: 140px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <section class="mainContent">
            <div class="pageHeader">
                <h2>商品-详情查看</h2>
                <!--backLink-->
                <a href="javascript:" class="backLink">返回</a>

            </div>

            <!-- col-md-offset-2 列偏移了两列-->
            <div class="col-md-2 leftsideBar">
                <p>商品编号&nbsp<span class="bg-info">12345</span></p>
                <label for="goodsStatus" class="control-label">当前状态</label>
                <select id="goodsStatus">
                    <option value="">在售</option>
                    <option value="">已下架</option>
                </select>


            </div>

            <div class="editbuttonDiv">
                <button id="modifyBtn" type="button" class="btn btn-primary" data-modifystate="begin">
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                    修改商品
                </button>
            </div>


            <div class="col-md-7">
                <form id="modifyForm" class="form-horizontal">

                    <div class="form-group">
                        <label class="col-md-3 control-label" for="goodsName">商品名称</label>

                        <div class="col-md-9">
                            <input type="text" class="form-control" name="goodsName" id="goodsName"
                                   value="恭喜小肥威获得内蒙古海景房一套"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="goodsDescription">商品描述</label>

                        <div class="col-md-9">
                            <input type="text" class="form-control" name="goodsDescription" id="goodsDescription"
                                   value="房自己建，海自己挖"/>
                        </div>
                    </div>

                    <div class="form-group ">
                        <label for="goodsType" class="control-label col-md-3">所属分类</label>

                        <div class="col-md-3">
                            <select class="form-control" name="goodsLevel1" id="goodsType1">


                            </select>
                        </div>

                        <div class="col-md-3" id="secondSelect">
                            <select class="form-control" name="goodsLevel2" id="goodsType2">


                            </select>
                        </div>


                    </div>
                    <div class="form-group ">
                        <label for="goodsPrice" class="control-label col-md-3">商品价格</label>

                        <div class="col-md-4">
                            <div class="input-group">
                                <input type="text" class="form-control" id="goodsPrice" name="goodsPrice"
                                       placeholder="价格" value="100"/>
                                <span class="input-group-addon">元</span>
                            </div>
                        </div>

                    </div>
                    <div class="form-group">
                        <label for="goodsStock" class="control-label col-md-3">商品存库</label>

                        <div class="col-md-4">
                            <div class="input-group ">
                                <input type="text" class="form-control" id="goodsStock" name="goodsStock"
                                       placeholder="库存" value="100"/>
                                <span class="input-group-addon">件</span>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="exampleInputFile" class="control-label col-md-3">商品图片</label>
                        <input type="file" id="exampleInputFile" class="col-md-4">

                    </div>
                    <!-- 上传完成的缩略图在这里展示-->
                    <div class="uploadImgShow">
                        <!-- 示例图片占位置，可以删，图片大小是140x140-->
                        <img src="../images/20.png" alt="图片出错了" class="img-rounded img-responsive">
                    </div>
                    <!-- 上传完成的缩略图在这里展示结束-->

                    <!-- 富文本编辑器-->
                    <div>
                        <label class="control-label col-md-3">商品详情</label>
                        <!--<div class="col-md-12 col-md-offset-3" id="goodsDetail"></div>-->
                        <a href="javascript:" id="editModalInit"
                           class="button button-glow button-border button-rounded button-primary ">点我有惊喜！</a>
                    </div>


                </form>
            </div>

        </section>
    </div>
</div>

<!-- 商品详情模态框 -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     id="editDetailsModal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>

                <h4 class="modal-title">修改商品详情</h4>
            </div>
            <div class="modal-body">

                <div id="editMenu" class="toolbar" style="border: 1px solid #ccc;"></div>
                <div style="padding: 5px 0; color: #ccc">我是分割线</div>
                <!-- 富文本编辑器位置及其内容-->
                <div id="goodsDetail" style="border: 1px solid #ccc;height: 500px">
                    <p>中科院公布重大科学发现经悟空卫星的500余天的探寻终有结果</p>

                    <p><img alt="中科院公布重大科学发现 经悟空卫星的500余天的探寻终有结果"
                            src="http://img2.utuku.china.com/650x0/news/20171130/f51276ac-0d57-4109-a90a-7050cc3375d5.jpg">
                    </p>

                    <p>中科院院长白春礼说，也许在人类科学发展的历史上，大家会记住今天，中国科学家已经从自然科学前沿重大发现和理论的学习者、继承者、围观者，逐渐走到了舞台中央。</p>

                    <p><img alt="中科院公布重大科学发现 经悟空卫星的500余天的探寻终有结果"
                            src="http://img1.utuku.china.com/550x0/news/20171130/cfe8fd95-54b1-49bc-bf25-ac72fc2bef1a.jpg">
                    </p>

                    <p>中科院公布重大科学发现经悟空卫星的500余天的探寻终有结果</p>

                    <p>
                        21世纪经济报道记者日前从中科院获悉，“悟空”卫星在轨运行的前530天，共采集了约28亿颗高能宇宙射线，其中包含约150万颗25GeV以上的电子宇宙射线。基于这些数据，科研人员成功获取了目前国际上精度最高的电子宇宙射线探测结果。
                </div>
                <!-- 富文本编辑器位置结束-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" >关闭</button>
                <button type="button" class="btn btn-primary" data-btnstate="edit" id="beginEdit">启用编辑</button>
            </div>
        </div>
    </div>
</div>

<script src="../js/jquery-2.1.1.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../js/wangEditor.min.js"></script>
<script src="../bootstrap/js/bootstrapValidator.min.js"></script>
<script type="text/javascript">
    //jq 函数开始
    $(function () {
        //所有input 属性是只读属性
        $('input').attr("readonly", "readonly");
        $('select').attr("disabled", "disabled");

        //富文本编辑器加载
        var myEditor = editorInit();

        //表单校验规则加载
        formValidator();

        //禁用编辑器
        myEditor.$textElem.attr('contenteditable', false)

        //样板下拉框数据，应该从后台加载过来
        var selectData = {
            "女歌手": ["ladygaga", "adele", "霉霉", "KellyClarkson", "CélineDion"],
            "手机": ["三星", "华为", "小米"],
            "电脑": ["华硕", "戴尔", "联想"]
        };

        //联动加载触发
        selectLevel(selectData);

        //模态框加载

        modalShow("#editModalInit", '#editDetailsModal');

        //点击“返回”按钮
        $(".backLink").on("click", function () {
            //获取父页面的iframe 元素，并且更改它的src地址
            $("#myIframe", window.parent.document).attr("src", "Mall/GoodsList.html");

        })

        //点击模态框修改按钮
        $("#beginEdit").on("click", function () {
            var btnstate = $(this).data("btnstate");
            if (btnstate == "edit") {
                // 开启编辑功能
                myEditor.$textElem.attr('contenteditable', true);
                $("#goodsDetail").eq(0).focus();
                $(this).data("btnstate", "complete");
                $(this).text("完成修改");
            }
            else {
                //禁用编辑器
                myEditor.$textElem.attr('contenteditable', false);
                $(this).text("启用编辑");
                $(this).data("btnstate", "edit");
                $('#editDetailsModal').modal("hide");

            }


        });

        //点击修改按钮
        $("#modifyBtn").on("click", function () {

            var modifyState = $(this).data("modifystate");

            if (modifyState == "begin") {

                $('input').attr("readonly", false);
                $('select').attr("disabled", false);
                $(this).data("modifystate", "save");

                $(this).html("<span class='glyphicon glyphicon-saved' aria-hidden='true'></span>保存修改");
            }
            else {
                $('#modifyForm').bootstrapValidator('validate');

                var flag = $("#modifyForm").data('bootstrapValidator').isValid();
                if (flag === false) {
                    //如果表单内容有误，后面不再执行，点击按钮也不会提交
                    return false;
                }

                // 提交表单完成成功后，回调函数执行以下步骤
                //清除校验样式
                $('#modifyForm').data('bootstrapValidator').resetForm();
                //还原按钮以及data 属性
                $(this).html("<span class='glyphicon glyphicon-pencil' aria-hidden='true'></span>修改商品");
                $(this).data("modifystate", "begin");
                $('input').attr("readonly", "readonly");
                $('select').attr("disabled", "disabled");


            }

        });

    });




    //富文本编辑器加载
    function editorInit() {
        var E = window.wangEditor
        var editor = new E('#editMenu', '#goodsDetail')

//        var editor1 = new E('#div1', '#div2')
        // 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
        editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
        //editor.customConfig.uploadImgServer = '/upload'  // 上传图片到服务器

        editor.create();

        //返回编辑器对象
        return editor;


    }

    //添加商品的表单校验规则，ajax 提交请看这里(～￣▽￣)～
    function formValidator() {
        $('#modifyForm').bootstrapValidator({
            message: '这个值是假的兄弟！',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                goodsName: {
                    message: '商品名称无效',
                    validators: {
                        notEmpty: {
                            message: '商品名称是必需的，不能是空的'
                        },
                        stringLength: {
                            min: 2,
                            max: 25,
                            message: '商品名称必须大于2，长度小于25个字符。 '
                        }
                    }
                },
                goodsDescription: {
                    message: '商品描述无效',
                    validators: {
                        notEmpty: {
                            message: '商品描述是必需的，不能是空的'
                        },
                        stringLength: {
                            min: 2,
                            max: 30,
                            message: '商品描述必须大于2，长度小于30个字符。 '
                        }
                    }
                },
                goodsLevel1: {
                    validators: {
                        notEmpty: {
                            message: '一级分类不能是空的'
                        }
                    }
                },
                goodsLevel2: {
                    validators: {
                        notEmpty: {
                            message: '二级分类不能是空的'
                        }
                    }
                },
                goodsPrice: {
                    validators: {
                        notEmpty: {
                            message: '商品价格不能是空的'
                        },
                        greaterThan: {
                            value: 0,
                            inclusive: false,
                            message: '商品价格必须大于或等于1'
                        }
                    }
                },
                goodsStock: {
                    validators: {
                        notEmpty: {
                            message: '商品存库不能是空的'
                        },
                        greaterThan: {
                            value: 0,
                            inclusive: false,
                            message: '商品存库必须大于或等于1'
                        }
                    }
                }
            }
        }).on('success.form.bv', function (e) {//这是当表单检验成功通过时的事件
            // Prevent form submission
            //阻止表单再次提交
            e.preventDefault();

            console.log("ok");
            //在这里做你想做的事情！！！！！！！

            //表单提交成功后，请清空表单内容
            // Get the form instance获取表单的的对象
            // var $form = $(e.target);

            // // Get the BootstrapValidator instance
            // var bv = $form.data('bootstrapValidator');

            // Use Ajax to submit form data 这里提交到后台处理使用 ajax
            // $.post($form.attr('action'), $form.serialize(), function(result) {
            //      console.log(result);
            //  }, 'json');
        });
    }

    //下拉框联动
    function selectLevel(selectData) {


        //初始化 所有的一级分类的数据
        $.each(selectData, function (key, value) {
            var $option = $("<option></option>");
            $option.text(key);//获取当前一级分类
            $("#goodsType1").append($option);
        });


        //加载二级分类的数据
        $("#goodsType1").on("change", function () {
            //拿到当前一级分类
            var pro = $("#goodsType1 option:selected").text();

            if (pro == "请选择品类") {
                $("#secondSelect").css("display", "none");
                return false;
            }

            //2级下拉菜单展现
            $("#secondSelect").css("display", "block");

            //清空原有的city数据
            $("#goodsType2").empty();


            //根据一级分类，拿到所有的二级分类，然后根据二级分类创建option添加到goodsType2中
            $.each(selectData[pro], function (i, value) {
                $("#goodsType2").append("<option>" + value + "</option>");

            });
        });


    }

    //模态框加载
    function modalShow(buttonId,modalId) {  //这个buttonId，前面需要用#或.

        $(buttonId).on("click",function() {
            $(modalId).modal({show: true, backdrop: 'static', keyboard: false});
        });
    }
</script>
</body>
</html>